<template>
<div>
    <div @click="getCityList" type="primary" class="thestore" :store_id="currenSotre.store_id">
        <img class="storeImg" :src="currenSotre.thumb" alt="" />
        <i class="ellipsis">{{currenSotre.name}}</i>
    </div>
    <el-drawer
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose">
      <div class="cityBox">
        <div class="cityInput-box"> 
          <input type="text" class="cityInput" placeholder="按门店名称搜索">
        </div>
        <div class="city-container">
          <div :class="item1.type!='hot'? 'conItem' : 'conItem botBorder' " v-for="(item1,key1) in cityList" :key='key1'>
            <div class="conItem_1">{{item1.type}}</div>
            <ul>
              <li v-for="(item2,key2) in item1.list" :key="key2">
                <div class="conItem_2">
                  <p class="cityName" :city_id="item2.city_id">{{item2.city_name}}</p>
                  <ol>
                    <li v-for="(item3,key3) in item2.store_list" :key="key3" :class="item3.store_id == currenSotre.store_id?'redColor':''" :data-store_id="item3.store_id" @click="handleChange">{{item3.store_name}}</li>
                  </ol>
                </div>
              </li>
            </ul>
          </div>
          
        </div>
      </div>
    </el-drawer>
  </div>

</template>


<script>
var n = 0;
// console.log('a')
import {abc} from '../../js/abc.js';
// var str = abc.getSession('store')
// var store = JSON.parse(str);

// console.log(store)
  export default {
    props: ['currenSotre'],
    data() {
      return {
        drawer: false,
        direction: 'ltr',
        cityList:[],
        // currenSotre:this.props,

      }
    },
    methods: {
      handleClose(done) {       
        console.log('abak')
        done();
      },
      getCityList(){
        var that = this;
        if(that.drawer){
          that.drawer = false;
          
        }else{
          that.drawer = true;
        }        
        if(that.cityList.length == 0){
          abc.post(that,'v2/store/list',{},function (res) {
            var list = res.data;
            for (let i in list) {
                that.cityList.push({
                    type: i,
                    list: list[i]
                })
            }
            console.log(that.cityList)
          })  
        }        
      },
      handleChange(event){
        console.log(event)
        store_id = event.target.dataset.store_id;
        var that = this;
        abc.post(that,'v1/store/updateSelect',{store_id:store_id},function(res) {
          abc.setSession('token', res.data.token);
          abc.setSession('user_id', res.data.user_id);
          abc.setSession('store_id', res.data.store_id);
          abc.setSession('menu_list', res.data.menu_list);
          abc.setSession('store', res.data.store);
          abc.setSession('thumb', res.data.thumb);
          abc.setSession('username', res.data.username);
          abc.setSession('name', res.data.name);
          abc.setSession('store_key', res.data.store.store_key);
          abc.setSession('store_name', res.data.store.name);
          abc.setSession('store_type', res.data.store.store_type);
          abc.setSession('del', 'no');
          abc.setSession('params','?token=' + res.data.token + '&user_id=' + res.data.user_id + '&store_id=' + res.data.store_id + '&platform=operate');          
          res.data.menu_list.forEach(function(item,i){
            console.log('a:::::',item)
            if(item.url == '/staffall'){              
              item.sub_menu.forEach(function(item2,k){
                if(item2.url == './staff/staff.html'){
                  if(item2.sub_menu.length != 0){
                    for(var j=0;j<item2.sub_menu.length;j++){
                      if(item2.sub_menu[j].url.indexOf('del') != -1){
                        abc.setSession('del', 'yes');
                      }
                    }	
                  }
                  
                  return false;
                }
              })
              return false;
            }
          })
          setTimeout(() => {
              window.location.reload();
          }, 500) 
        }) 
      }
  }
}
</script>

<style lang="scss" scoped>

.thestore{
  display: flex;
  line-height: 34px;
  padding: 10px 0;
  background: rgb(46, 52, 58);
  padding-left:16px;
  color:rgba(255,255,255,0.5);
  font-size:14px;
  .storeImg{
    margin-right: 5px;
    display: block;
    width:32px;
    height:32px;
    border-radius: 50%        
  }
}

.cityBox{
  padding:0 20px;
  .cityInput{
    width:100%;
    height: 30px;
    border-radius:10px;
    border:1px solid #ccc;
    background: transparent;
    padding: 0 10px;
    box-sizing: border-box;
    color:#fff;
  }
}
.conItem{
  display: flex;
  padding: 20px 0 0;
  color:rgba(255,255,255,0.5);
  font-size:14px;
  .conItem_1{
    width:60px;
  }
  ul{
    flex-grow: 1;
    li{
      .conItem_2{
        display: flex;
        .cityName{
          width:90px;
        }
        ol{
          flex-grow: 1;
          display: flex;
          flex-direction:column;
          li{
            margin-right: 20px;
            margin-bottom: 18px;
            cursor: pointer;
          }
        }
      }
      
    }
  }
}
.botBorder{border-bottom:1px solid #ccc}
.redColor{color:red;}
</style>
